{% stylesheet %}
.block_brand-warp {
  position: relative;
}

.block_brand-warp .swiper-button-disabled path {
  fill:#ccc !important;
}

.block_brand-warp .swiper-wrapper {
  display: flex;
  align-items: center;
}

.block_brand-warp a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.block_brand-warp .block_brand-image {
  width: 100%;
  height: auto;
}

.block_brand-warp .brand-next, .block_brand-warp .brand-prev {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -25px;
  cursor: pointer;
  right: -50px;
  transition: all 0.4s ease-in-out;
}

@media screen and (max-width: 767px) {
  .block_brand-warp .brand-next, .block_brand-warp .brand-prev {
    display: none;
  }
  .block_brand-warp .pagination {
    display: flex !important;
  }
}

.block_brand-warp .brand-next svg, .block_brand-warp .brand-prev svg {
  width: 20px;
  height: 20px;
}

.block_brand-warp .brand-next svg path, .block_brand-warp .brand-prev svg path {
  fill: #000000;
}

.block_brand-warp .brand-prev {
  left: -50px;
}

.block_brand-warp .pagination {
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  overflow: hidden;
}

.block_brand-warp .pagination span {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #1d1f21;
  border-radius: 50%;
  background: none;
  margin: 0 3px;
  opacity: 1;
  box-sizing: border-box;
  flex-shrink: 0;
}

.block_brand-warp .pagination span.swiper-pagination-bullet-active {
  background: #1d1f21;
}

{% endstylesheet %}

{% assign defaultImageEmpty = 'empty.png' | public_asset_abs_url %}
{% assign blockId = block_id | default : section.block_id %}
<div class="block_brand_list container_wrapper">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        {% assign blocksLength  =  section.blocks %}
        {% capture variable %}
        {% if condition %}
          
        {% endif %}
        {% endcapture %}
        <div class="block_brand-warp">
          <div style="overflow: hidden;width: 100%;"  id="block_brand-{{blockId}}">
            <ul class="swiper-wrapper" id="block_brand-swiper-wrapper-{{blockId}}" >
              {% for block in blocksLength %}
              <li class="swiper-slide">
                <a href="{{block.link.url | default :'javascript:;'}}">
                  <img class="block_brand-image" data-src="{{block.image.src}}" src="{{ defaultImageEmpty }}" alt="{{block.image.alt}}">
                </a>
              </li>
              {% endfor %}
              {% unless blocksLength %}
              {% for block in (1..6) %}
              <li class="swiper-slide">
                <a href="{{block.link.url | default :'javascript:;'}}">
                  <img class="block_brand-image" data-src="{{block.image.src}}" src="{{ defaultImageEmpty }}" alt="{{block.image.alt}}">
                </a>
              </li>
              {% endfor %}
              {% endunless %}
            </ul>
          </div>

          {% if blocksLength.size > 6 %}
          <div class="brand-prev" id="block_prev_{{ blockId  }}">{% include 'icon_silde_left' ,width:'24',height:'24' %}</div>
          <div class="brand-next" id="block_next_{{ blockId  }}">{% include 'icon_silde_right' ,width:'24',height:'24' %}</div>
          {% endif %}

          {% if blocksLength.size > 3 %}
            <div class="pagination" id="pagination_{{blockId}}"></div>
          {% endif %}
          
        </div>
</div>
<script type="text/javascript">
(function(){
 new Swiper("#block_brand-{{ blockId }}", {
        slidesPerView: 6,
        spaceBetween: 30,
        navigation: {
            nextEl: "#block_next_{{ blockId  }}",
            prevEl: "#block_prev_{{ blockId  }}"
        },
        
        breakpoints: {
            768: {
                slidesPerView: 2.5,
                spaceBetween: 14,
                pagination: {
                  el: "#pagination_{{ blockId  }}"
                }
            }
        },
        on: {
            init: function (swiper) {
                if (this.virtualSize < this.width) {
                    $("#block_brand-swiper-wrapper-{{blockId}}").css({
                        justifyContent: "center"
                    });
                }
            }
        }
    });

})()
</script>
{% schema %}
{
	"class": "brand_list",
	"is_global": false,
	"icon": "",
	"name": {
		"zh_CN": "合作伙伴"
	},
	"max_blocks": "20",
	"blocks": [
		{
			"name": {
				"zh_CN": "品牌"
			},
			"type": "brand_item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "建议宽度350px，高度自适应且尺寸保持一致"
					},
					"id": "image"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容"
			}
		}
	],
	"default": {
		"settings": {
			"title": "Partner",
			"detail": ""
		},
		"blocks": [ {
          "block_type": "brand_item",
          "image": {
            "src": "",
            "alt": ""
          },
          "link": {
            "type": "",
            "title": "",
            "url": ""
          }
        }, {
          "block_type": "brand_item",
          "image": {
            "src": "",
            "alt": ""
          },
          "link": {
            "type": "",
            "title": "",
            "url": ""
          }
        }, {
          "block_type": "brand_item",
          "image": {
            "src": "",
            "alt": ""
          },
          "link": {
            "type": "",
            "title": "",
            "url": ""
          }
        },
        {
          "block_type": "brand_item",
          "image": {
            "src": "",
            "alt": ""
          },
          "link": {
            "type": "",
            "title": "",
            "url": ""
          }
        },
        {
          "block_type": "brand_item",
          "image": {
            "src": "",
            "alt": ""
          },
          "link": {
            "type": "",
            "title": "",
            "url": ""
          }
        },
        {
          "block_type": "brand_item",
          "image": {
            "src": "",
            "alt": ""
          },
          "link": {
            "type": "",
            "title": "",
            "url": ""
          }
        }]
	}
}
{% endschema %}